<template>
	<view class="container">
		<view class="change-username">
			<u-input placeholder="请输入修改后的昵称" border="surround" clearable class="username" v-model='nickName'></u-input>
			<button type="default" class="btn" @click="save()">保存</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				nickName: ''
			};
		},
		methods: {
			save() {
				console.log(this.nickName)
				this.updateInfo()
			},
			async updateInfo() {
				const info = {}
				info.headerUrl = uni.getStorageSync('avator')
				info.password = uni.getStorageSync('password')
				info.phone = uni.getStorageSync('phone')
				info.userId = uni.getStorageSync('userId')
				info.userName = this.nickName
				info.wxId = uni.getStorageSync('openId')
				info.roleId = uni.getStorageSync('roleId')
				const {
					data: res
				} = await uni.$http.post(uni.$http.baseURL + '/user/updateUserInfo', info)
				console.log(res)
				if(res.message=='成功'){
					uni.setStorageSync('userName', this.nickName)
					uni.$showMsg('修改昵称成功！','success')
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.$showMsg('修改昵称失败！','error')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.change-username {
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		.username {
			background: #FFFFFF;
			border: 1rpx solid #EBEEF5;
			margin: 30rpx 30rpx 0 30rpx;
			border-radius: 10rpx;
		}

		.btn {
			margin-top: 120rpx;
			width: 560rpx;
			background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
			color: #FFFFFF;
		}
	}
</style>
